import { Transfer, Tree } from 'antd';
import { connect } from 'dva';
import { PureComponent } from 'react';

const { TreeNode } = Tree;

// Customize Table Transfer
const isChecked = (selectedKeys, eventKey) => {
  return selectedKeys.indexOf(eventKey) !== -1;
};

const generateTree = (treeNodes = [], checkedKeys = [],transferDataSource = []) => {
  return treeNodes.map(({ children, ...props }) => (
    <TreeNode 
    {...props} 
    disabled={!(transferDataSource.find(item=> item.id === props.id)) || checkedKeys.includes(props.id)} 
    key={props.id} 
    title={props.name}>
      {generateTree(children, checkedKeys,transferDataSource)}
    </TreeNode>
  ));
};


class TreeTransfer extends PureComponent{

  constructor(props){
    super(props)
    this.state={
      leftKeyWord:''
    }
  }


  render(){
    const { dataSource, targetKeys,transferDataSource, ...restProps } = this.props
    const {leftKeyWord} = this.state


    const filteByKeyWord = () => {
      if(leftKeyWord== null || leftKeyWord.length === 0){
        return dataSource
      }
      const temp = []
      dataSource.forEach((data) => {
        const children = []
        if (data.children) {
          data.children.forEach(user => {
            if (user.name.indexOf(leftKeyWord) !== -1) {
              children.push(user)
            }
          })
        }
        if (children.length !== 0) {
          const tChild = Object.assign({},data)
          tChild.children = children
          temp.push(tChild)
        }
      })
      return temp
    }

    const filtedDataSource = filteByKeyWord()


    return (
      <Transfer
        {...restProps}
        targetKeys={targetKeys}
        dataSource={transferDataSource}
        titles={['待选列表', '已选列表']}
        render={item => item.name}
        onSearch={(direction,value) => {
          if(direction === 'left'){
            this.setState({leftKeyWord:value})
          }
        }}
        showSelectAll={false}
      >
        {({ direction, onItemSelect, selectedKeys }) => {
          if (direction === 'left') {
            const checkedKeys = [...selectedKeys, ...targetKeys];
            return (
              <Tree
                blockNode
                checkable
                checkStrictly
                defaultExpandAll
                checkedKeys={checkedKeys}
                onCheck={(
                  _,
                  {
                    node: {
                      props: { eventKey },
                    },
                  },
                ) => {
                  onItemSelect(eventKey, !isChecked(checkedKeys, eventKey));
                }}
                onSelect={(
                  _,
                  {
                    node: {
                      props: { eventKey },
                    },
                  },
                ) => {
                  onItemSelect(eventKey, !isChecked(checkedKeys, eventKey));
                }}
              >
                {generateTree(filtedDataSource, targetKeys,transferDataSource)}
              </Tree>
            );
          }
        }}
      </Transfer>
    );
  }
}

export default connect()(TreeTransfer)